<template>
	<view class="mypage mzw-page mzw-bgc1 mzw-safeB">
		<mzw-page-navbg />
		<u-navbar leftText="优惠卷" :autoBack="true" placeholder :safeAreaInsetTop="true" bgColor="transparent" leftIconColor="#1C274C"></u-navbar>
		<u-sticky :customNavHeight="44+topSafeArea">
			<view class="m-mzw-tab1">
				<u-tabs :current="tabIndex" :list="tabList" lineWidth="40rpx" lineHeight="6rpx" :scrollable="false" :inactiveStyle="{fontSize:'32rpx',lineHeight:1.5,fontWeight:400,color:'rgba(28,39,76,0.6)'}" :activeStyle="{fontWeight:600,color:'#1C274C'}" :itemStyle="{height:'96rpx'}" @change="handleTabsChange"></u-tabs>
			</view>
		</u-sticky>
		<view class="wp">
			<view class="ul-mzw-coupon">
				<!--类名 state1：已使用，state2：已过期 -->
				<view class="li" :class="{'state1':tabIndex===1,'state2':tabIndex===2}" v-for="(item,index) in list1" :key="index">
					<view class="con">
						<view class="left">
							<image :src="imageUrl+'mzw/bgpic-a1.png'" mode="heightFix"></image>
							<view class="lcon">
								<view class="price" :class="{'fs48':item.price === 1}">
									<text class="i1" v-if="item.price > 1">￥</text>
									<text class="i2">{{item.price === 1 ? '单次':item.price}}</text>
								</view>
								<view class="info">{{item.info1}}</view>
								<view class="tag1" v-if="item.tag1">{{item.tag1}}</view>
							</view>
						</view>
						<view class="right">
							<view class="rcon">
								<view class="row1">
									<view class="tit">{{item.tit}}</view>
									<view class="tag2" v-if="item.plate"><text class="tag2-con">{{item.plate}}</text></view>
									<view class="flex-1"></view>
									<view class="state">{{tabList[tabIndex].name}}</view>
								</view>
								<view class="info">{{item.info2}}</view>
								<view class="row2">
									<view class="date">有效期至 2025-10-01</view>
									<view class="btn">使用规则</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mzwPageNavbg from '@/components/mzw-page-navbg.vue';
	import getTopSafeArea from '@/static/safeTop.js';
	export default {
		components:{
			mzwPageNavbg
		},
		data() {
			return {
				topSafeArea: 0,
				tabIndex: 0,
				tabList:[
					{name: '未使用'},
					{name: '已使用'},
					{name: '已过期'},
				],
				list1:[
					{
						price: 2,
						info1: '满 20 可使用',
						tag1: '不可叠加',
						tit: '停车优惠券',
						plate: '鄂E·1G2345',
						info2: 'xxxxx停车场2元券'
					},{
						price: 12,
						info1: '满 20 可使用',
						tag1: '不可叠加',
						tit: '商家优惠券',
						plate: '',
						info2: 'xxxxx停车场2元券'
					},{
						price: 1,
						info1: '免费停车',
						tag1: '',
						tit: '车牌券',
						plate: '鄂E·1G2345',
						info2: 'xxxxx停车场2元券'
					}
				]
			};
		},
		onLoad() {
			this.topSafeArea = getTopSafeArea();
		},
		methods:{
			handleTabsChange(e){
				this.tabIndex = e.index;
			}
		}
	}
</script>

<style lang="scss" scoped>
.ul-mzw-coupon{
	padding-top: 20rpx;
	overflow: hidden;
	.li{
		margin-bottom: 20rpx;
		.con{
			height: 180rpx;
			display: flex;
			overflow: hidden;
			.left,.right{
				border-radius: 20rpx;
				height: 100%;
				overflow: hidden;
				background-color: #fff;
			}
			.left{
				flex-shrink: 0;
				width: 200rpx;
				position: relative;
				background-image: linear-gradient(163.53deg, rgba(254, 185, 18, 0.2) 8.68%, rgba(255, 129, 0, 0.2) 91.88%);

				image{
					width: auto;
					height: 100%;
					position: absolute;
					left: 0;
					bottom: 0;
				}
				.lcon{
					width: 100%;
					height: 100%;
					position: relative;
					border-right: 1px dashed rgba(28, 39, 76, 0.2);
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: #FF8100;
					.price{
						font-weight: 600;
						font-size: 60rpx;
						line-height: 60rpx;
						&.fs48{
							font-size: 48rpx;
							padding-top: 10rpx;
						}
						.i1{
							font-weight: 400;
							font-size: 24rpx;
							line-height: 1.5;
						}
					}
					.info{
						font-weight: 400;
						font-size: 24rpx;
						line-height: 2;
					}
					.tag1{
						display: inline-block;
						height: 22rpx;
						line-height: 22rpx;
						border: 1px solid #FF8100;
						border-radius: 4rpx;
						padding: 0 10rpx;
						font-weight: 400;
						font-size: 20rpx;
						margin-top: 4rpx;
					}
				}
			}
			.right{
				flex: 1;
				.rcon{
					width: 100%;
					height: 100%;
					position: relative;
					border-left: 1px dashed rgba(28, 39, 76, 0.2);
					box-sizing: border-box;
					padding: 20rpx;
					.row1{
						display:flex;
						align-items: center;
						.tit{
							font-weight: 500;
							font-size: 32rpx;
							line-height: 48rpx;
							color: #1C274C;
							max-width: 5em;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.tag2{
							display: block;
							border-radius: 8rpx;
							text-align: center;
							padding: 4rpx;
							background-color: rgba(36, 167, 206, 0.1);
							
							margin-left: 10rpx;
							.tag2-con{
								display: block;
								font-size: 24rpx;
								font-weight: 600;
								color: #24A7CE;
								line-height: calc(40rpx - 2px);
								border-radius: 4rpx;
								padding: 0 4rpx;
								border: 1px solid #24A7CE;
								white-space: nowrap;
							}
						}
						.flex-1{
							flex: 1;
						}
						.state{
							font-size: 24rpx;
							font-weight: 400;
							color: #24A7CE;
							line-height: 32rpx;
							background-color: rgba(36, 167, 206, 0.1);
							padding: 0 10rpx;
							border-radius: 8rpx;
						}
					}
					
					.info{
						font-weight: 400;
						font-size: 24rpx;
						line-height: 32rpx;
						color: rgba(28, 39, 76, 0.6);
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-bottom: 10rpx;
					}
					.row2{
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-weight: 400;
						font-size: 20rpx;
						line-height: 48rpx;
						color: rgba(28, 39, 76, 0.6);
					}
				}
			}
		}
		&.state1{
			.con{
				.right .rcon{
					.row1 .state{
						background-color: rgba(28, 39, 76, 0.1);
						color: rgba(28, 39, 76, 0.6);
					}
					.info,.row2{
						color: rgba(28, 39, 76, 0.2);
					}
				}
			}
		}
		&.state2{
			.con{
				.left{
					background-image: linear-gradient(0deg, rgba(28, 39, 76, 0.1), rgba(28, 39, 76, 0.1));
					.lcon{
						color: rgba(28, 39, 76, 0.6);
						.tag1{
							border-color: rgba(28, 39, 76, 0.6);
						}
					}
				}
				.right .rcon{
					.row1 {
						.tit{
							color: rgba(28, 39, 76, 0.6);
						}
						.tag2{
							background-color: rgba(28, 39, 76, 0.1);
							.tag2-con{
								color: rgba(28, 39, 76, 0.6);
								border-color: rgba(28, 39, 76, 0.6);
							}
						}
						.state{
							background-color: rgba(28, 39, 76, 0.1);
							color: rgba(28, 39, 76, 0.6);
						}
					}
					.info,.row2{
						color: rgba(28, 39, 76, 0.2);
					}
				}
			}
		}
	}
}
</style>
